<template>
  <div class="person">
    <h2>当前求和为 {{ sum }}, 放大十倍后的数是: {{ bigSum }}</h2>
    <button @click="add">点我sum + 1</button>
    <hr>  <!-- 分割 -->
    <img v-for="(dog, index) in dogList" :src="dog" :key="index">
    <br>
    <button @click="getDog">再来一只狗</button>
  </div>

</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import useDog from '@/hooks/useDog'
import useSum from '@/hooks/useSum'


const {sum, add, bigSum} = useSum()
const {dogList, getDog} = useDog()


</script>

<style scoped >
  /*  加上这个scoped 只能在本vue有效  无脑加*/
  .person {
    background-color: pink;
  }

  button {
    margin: 0 5px;
  }

  img {
   height: 100px;
   
   margin: 10px;
  }
</style>